<template>
  <div class="hello">
    <br/>
    <span style="color: red"> 选择位置（要是地图没有出来，刷新一下页面） </span>
    <el-amap
      vid="amapDemo"
      :center="center"
      :zoom="zoom"
      :plugin="plugin"
      class="amap-demo"
      :events="events">
    </el-amap>
    <div class="toolbar">
      <br/>
      <span style="color: red"> 纬度：{{ lng }}, 经度：{{ lat }} </span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    let self = this;
    return {
      zoom: 12,
      center: [121.59996, 31.197646],
      plugin: [{
        pName: 'Geolocation',
        events: {
          init(o) {
            // o 是高德地图定位插件实例
            o.getCurrentPosition((status, result) => {
              if (result && result.position) {
                self.lng = result.position.lng;
                self.lat = result.position.lat;
                self.center = [self.lng, self.lat];
                self.loaded = true;
                self.$nextTick();
              }
            });
          }
        }
      }],

      events: {
        click(e) {
          let {lng, lat} = e.lnglat;
          self.lng = lng;
          self.lat = lat;

          // 这里通过高德 SDK 完成。
          var geocoder = new AMap.Geocoder({
            radius: 1000,
            extensions: "all"
          });
          geocoder.getAddress([lng, lat], function (status, result) {
            if (status === 'complete' && result.info === 'OK') {
              if (result && result.regeocode) {
                self.address = result.regeocode.formattedAddress;
                self.$nextTick();
              }
            }
          });
        }
      },
      lng: '',
      lat: '',
    }
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .amap-demo {
    height: 400px;
  }
</style>
